﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta http-equiv="Expires" CONTENT="0">
	<meta http-equiv="Cache-Control" CONTENT="no-cache">
	<meta http-equiv="Pragma" CONTENT="no-cache">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta name="description" content="">
	<meta name="keywords" content="0">
	<title>伯虎空气质量检测系统</title>
	<link rel="stylesheet" href="${s.base}/mobile/css/style.css">
	<link rel="stylesheet" href="${s.base}/js/layui/css/layui.css" media="all" />
	<script type="text/javascript" src="${s.base}/mobile/js/jquery.min.js"></script>
	<script type="text/javascript" src="${s.base}/jslayui/layui.js"></script>
	<style type="text/css">

		<!--body {

			background:#0099cc;
			width:100%;
			height:100%;

		}-->


		#head{width: 96%;height: 80px;margin-left: 2%;}
		#head ul{width: 100%;}
		#head ul li{float: left;line-height: 80px;}
		#head ul .title{width: 50%; text-align: left;font-size: 24px;color:#ffffff;font-weight: bold;}
		#head ul .btn{width: 50%; text-align: right;line-height: 80px;}
		#head ul .btn input{float: right; margin-right: 5%; width: auto; height: 36px; margin-top: 22px;font-size: 18px;color:#ffffff;}
		#content{width: 96%;margin-left: 2%;}
		#content .team{width: 100%;}
		#content .team ul{width: 95%; height: 600px;padding: 5px 5%; margin: 5px 0px;margin-left: 10px; background-color: rgba(0,0,0,0.0);border-radius: 10px;float:left;}
		#content .team ul li{float: left;opacity:1;}
		#content .team ul .show_image{width: 20%;text-align: center;line-height: 80px;}
		#content .team ul .show_image img{width: 60px;height: 60px;}
		#content .team ul .show_title{width: 80%;}
	     
		#content .team ul .show_title div{width: 100%;line-height:10px; margin-left: 10px; font-size: 20px;color: #ffffff;text-align: left;}
		#content .team ul .show_set{width: 15%; text-align: right; font-size: 20px;font-weight: bold; line-height: 40px;}
		#content .team ul .show_title_device{width: 100%;}
		#content .team ul .show_title_device div{width: 100%;line-height:20px; margin-left: 5px; font-size: 20px;color: #ffffff;text-align: left;}
		#content .team ul .show_set_device{width: 30%; text-align: right; font-size: 12px;font-weight: bold; line-height: 40px;}
		#content .team ul .show_Value{width: 45%;  margin-left: 10px; text-align: left; font-size: 15px;color: #ffffff;line-height: 40px;}
		#content .team ul .show_Value_relay{width: 60%;  margin-left: 10px; text-align: left; font-size: 15px;color: #ffffff;line-height: 40px;}

                #content .team1{width: 100%;}
		#content .team1 ul{width: 22%; height: 50%;margin: 1px 1px; background-color: rgba(0,0,0,0.0);}
	     
		#content .team1 ul .show_cs{width: 40%;}
		#content .team1 ul .show_cs div{width: 100%;margin: 20px 5px;font-size: 15px;color: #ffffff;text-align: left;}
		#content .team1 ul .show_cs .show_cs_top{padding-top: 5px;font-size: 18px;color:#ffffff;text-align: center;}
		#content .team1 ul .show_cs .show_cs_bottom{padding-top: 2px;font-size: 12px;color: #000000;text-align: center;}
		#content .team1 ul .show_cs .show_value{padding-top: 0px;text-align: center;font-size: 32px;color:#ffffff;font-weight:bold; }
		#content .team1 ul .show_cs .show_result{padding-top: 25px;text-align: center; font-size: 20px;font-weight: bold;color:#003300;}
	        
		.red{color:#FF0000;}
		.org{color:#F77303;}
		.gree{color:#9AFC02;}

	

		/**
        *弹窗页面
        */
		.ysq_alert{
			width:90%;
			margin-left: 10%;
			height:180px;
			padding: 20px 0px;
			background: #5F5F73;
			margin: auto;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius:10px;
			-moz-border-radius:10px;
			text-align: center;
		}
		.ysq_alert li{
			height: 55px;
			line-height: 55px;
			font-size: 28px;
			color: #FFFFFF;
		}
		.ysq_alert .alert_btn div{
			float: left;
			width: 50%;
		}
		.ysq_alert .alert_btn_left{
			text-align: right;
		}
		.ysq_alert .alert_btn_right{
			text-align: left;
		}
		.ysq_alert .alert_btn input{
			padding: 5px;
			font-size: 28px;
			color: #000000;
			margin: 10px 20px;
			border-radius:10px;
			-moz-border-radius:10px;
		}
	</style>
</head>

<script>

   function big_canvas(id,n,maxdata,data,w,h){
     var c=document.getElementById(id);
   
     c.height=c.width*0.748
     var ctx=c.getContext("2d");


     var pin1 = new Image(); 

     pin1.src = "${s.base}/mobile/img/bigpin.png"; 


     ctx.fillStyle = "#FFFFFF";
     ctx.textAlign="center";
     ctx.font="30px Arial";
     ctx.fillText(data,c.width/2.1,c.height/2.6);

     pin1.onload=function(){
            
                 ctx.translate(c.width/w, c.height/h);
                 ctx.rotate(-Math.PI*1.36+n/75*Math.PI*100/maxdata);
                 ctx.drawImage(pin1,-c.width*0.4*0.08,-c.width*0.4*0.08,c.width*0.28,c.height*0.28);
                 ctx.stroke(); 

                           };



   };


   function pin_canvas(id,n,maxdata,w,h){
     var c=document.getElementById(id);
   
     c.height=c.width*0.748
     var ctx=c.getContext("2d");


     var pin = new Image(); 

     pin.src = "${s.base}/mobile/img/bigpin.png"; 


     pin.onload=function(){
            
                 ctx.translate(c.width/w, c.height/h);
                 ctx.rotate(-Math.PI*1.36+n/75*Math.PI*100/maxdata);
                 ctx.drawImage(pin,-c.width*0.4*0.08,-c.width*0.4*0.08,c.width*0.28,c.height*0.28);
                 ctx.stroke(); 

                           };



   };
</script>



<body style="max-width:100%;">
     <div style="position:absolute; width:100%; height:100%; z-index:-1">
	<img style="position:fixed;" src="${s.base}/mobile/img/envoair_black.jpg" height="100%" width="100%" />
</div>

<div id="head">
	<ul>
                <!--
		<li class="title">
			EnvoAir
		</li>
                   <img src="${s.base}/mobile/img/envoair.png"  width=50% height=75% style=" margin-left: 25px;padding-top: 25px;"/>
               
		<li class="btn">
			<input type="button" onClick="window.location.href='${s.base}/pc/add5/${openid}'" class="layui-btn layui-btn-radius layui-btn-normal" value="添加设备"/>
		</li>
               -->
           
                
	</ul>
</div>
<div id="content">

	<div class="team">
		<#if deviceList?? && (deviceList?size > 0)>
		<#list deviceList as deviceProduct>
        <li>
		<ul >
            
		<!--	
			<div class="show_title_device" >
				<li style="width:70%;font-size: 16px;color: #ffffff;">${deviceProduct.name}
					<#if deviceProduct.newProduct.deviceType=="1">
					   <span class="gree">(在线)</span>
					<#else>
					   <span class="red">(离线)</span>
				        </#if>

	                        </li>
                                <li class="show_set_device"><span onclick="deleteDevice('${deviceProduct.id}','${deviceProduct.name}')">删除</span><li>
	               </div>
                    -->

<div  style=" width: 100%;padding-top: 2px;text-align: center;font-size: 48px;color:#ff0000; ">
      <img style="" src="${s.base}/mobile/img/IAQmeter.png"  width="40%" /> 
</div>



          <li   style=" width: 30%;position:relative; ">
              <img style="position:absolute;" src="${s.base}/mobile/img/HCHOcn.png"  width="100%" /> 
              <img style="position:absolute;margin-left:47%;margin-top:8%" src="${s.base}/mobile/img/Triangle.png"  width="5%" /> 
              <canvas id="${deviceProduct.id}hcho"  style="  height: 100%; width: 100%; margin: 0px 0px;" >您的浏览器不支持 HTML5 canvas 标签。</canvas>

              <script>
                    big_canvas("${deviceProduct.id}hcho",${deviceProduct.newProduct.hcho}+0.2,2.3,${deviceProduct.newProduct.hcho},2.1,1.5);
              </script>

             <div>
              <img style="padding-top: 20%;padding-left: 20%" src="${s.base}/mobile/img/Triangle_2.png"  width="60%" /> 
            </div>

            <div>
              <img style="position:absolute;padding-top: 6%" src="${s.base}/mobile/img/EnvoAir_logo1.png"  width="100%" />  
            </div>   
         </li>
         <li style="width:70%;padding-top:6%;">
	     <div class="team1">



		

		<#if deviceProduct.type=="1"||deviceProduct.type=="6"||deviceProduct.type=="7"||deviceProduct.type=="11"||deviceProduct.type=="12"||deviceProduct.type=="16">
			<ul style="position:relative;" >
			
                               <img style="position:absolute;" src="${s.base}/mobile/img/TVOCcn.png"  width="67%" /> 

                               <canvas id="${deviceProduct.id}voc"  style=" width: 100%; margin: 0px 0px;" >您的浏览器不支持 HTML5 canvas 标签。</canvas>
                               <script>
                                   pin_canvas("${deviceProduct.id}voc",${deviceProduct.newProduct.voc}+0.2,2.3,2.1,1.5);
                               </script>
			</ul>
		</#if>

                <#if deviceProduct.type=="1"||deviceProduct.type=="2"||deviceProduct.type=="5"||deviceProduct.type=="6"||deviceProduct.type=="8"||deviceProduct.type=="10"||deviceProduct.type=="14">
                        <ul style="position:relative;" >
                            
                               <img style="position:absolute;" src="${s.base}/mobile/img/CO2cn.png"  width="77%" /> 

                               <canvas id="${deviceProduct.id}co2"  style="width: 100%; margin: 0px 0px;" >您的浏览器不支持 HTML5 canvas 标签。</canvas>
                               <script>
                                   pin_canvas("${deviceProduct.id}co2",${deviceProduct.newProduct.co2}-200,2300,1.9,1.6);
                               </script>
           
                       </ul>
               </#if>


			<ul style="position:relative;" >
			
                               <img style="position:absolute;" src="${s.base}/mobile/img/pm2.png"  width="77%" /> 

                               <canvas id="${deviceProduct.id}pm2"  style=" width: 100%; margin: 0px 0px;" >您的浏览器不支持 HTML5 canvas 标签。</canvas>
                               <script>
                                   pin_canvas("${deviceProduct.id}pm2",${deviceProduct.newProduct.pm2}+120,1200,2,1.6);
                               </script>	
        
			</ul>








                <ul style="position:relative;width: 75%;margin-left: 50px;padding-top: 45px;border-bottom: 1px solid #ffffff;"></ul>



            
                                     


               <#if deviceProduct.type=="1"||deviceProduct.type=="2"||deviceProduct.type=="3"||deviceProduct.type=="4"||deviceProduct.type=="5"||deviceProduct.type=="6"||deviceProduct.type=="7"||deviceProduct.type=="8"||deviceProduct.type=="9"||deviceProduct.type=="10"||deviceProduct.type=="11"||deviceProduct.type=="17"||deviceProduct.type=="18">
                       <ul style="position:relative;margin-left: 15%;" >
                              
                               <li class="show_cs">	
                                <img src="${s.base}/mobile/img/temp.png"  width=42% height=75% style=" margin-left: 25px;padding-top: 25px;"/>
                               </li>

                               <li class="show_cs">	
                                  
                                       <div class="show_cs_top">Temp.</div>
                                      <!--  <div class="show_cs_bottom">℃</div>-->
                              
                                      <div class="show_value">${deviceProduct.newProduct.temr}℃</div>
                                     <!--   <div class="show_result">${deviceProduct.newProduct.temrTip}</div> -->
                              </li>
                      </ul>
               </#if>
                  <#if deviceProduct.type=="1"||deviceProduct.type=="2"||deviceProduct.type=="3"||deviceProduct.type=="4"||deviceProduct.type=="5"||deviceProduct.type=="6"||deviceProduct.type=="7"||deviceProduct.type=="8"||deviceProduct.type=="9"||deviceProduct.type=="10"||deviceProduct.type=="11"||deviceProduct.type=="17"||deviceProduct.type=="18">
                      <ul style="position:relative;">
   
                              
                               <li class="show_cs">	
                                <img src="${s.base}/mobile/img/humidity.png"  width=50% height=75% style=" margin-left: 25px;padding-top: 25px;"/>
                               </li>

                               <li class="show_cs">	
                                  
                                       <div class="show_cs_top">Hum.</div>
                                      <!--  <div class="show_cs_bottom">%</div>-->
                              
                                      <div class="show_value">${deviceProduct.newProduct.him}%</div>
                                     <!--   <div class="show_result">${deviceProduct.newProduct.himTip}</div> -->
                              </li>

        
                            <!--
                              <div class="show_cs">
                                     
                                      <div class="show_cs_top">湿度</div>
                                      <div class="show_cs_bottom">%</div>
                              
                                      <div class="show_value">${deviceProduct.newProduct.him}</div>
                                      <div class="show_result">${deviceProduct.newProduct.himTip}</div>
                              </div>
                            -->

                     </ul>
               </#if>




	      </div>
            </li>
             </ul>
          </li>
</#list>
</#if>



  <!-- 底部 
		<div  style="text-align: center;font-size: 16px;color:#ffffff;">
			<p><span>2018 陕西伯虎智创电子科技有限公司 电话:0917-8868928</span></p>
		</div>
      -->
</div>
</div>
 




<div id="alert_config_delete" class="ysq_alert" style="display: none;" >
	<ul>
		<li class="alert_title" style="text-align: left;padding-left: 20px;">
			温馨提示：
		</li>
		<li class="alert_title">
			<input type="hidden" id="productId"   class="layui-input" style="width: 80%;line-height: 28px;margin-left: 10%;"/>
			确定删除【<span id="showDeviceName"></span>】吗？
		</li>
		<li class="alert_btn">
			<div class="alert_btn_left">
				<input type="button" onclick="deleteContent()" value="确定"/>
			</div>
			<div class="alert_btn_right">
				<input type="button" onclick="lysc()" value="取消"/>
			</div>
		</li>

	</ul>
</div>
<script type="text/javascript">

    function setValue(name,id,maxValue) {
        $("#id").val(id);
        $("#maxValue").val(maxValue);
        $("#alert_show_title").html(name);
        $("#alert_config").show();
    }
    function lysc() {
        $(".ysq_alert").hide();
    }

    function deleteDevice(productId,productName) {
        $("#productId").val(productId);
        $("#showDeviceName").html(productName);
        $("#alert_config_delete").show();
    }


    function setCityContent() {
        var id=$("#id").val();
        var maxSendValue=$("#maxValue").val();

        if(maxSendValue==""||maxSendValue==null){
            alert("请先设置最大报警值！");
            return false;
        }

        $.ajax({
            type: "POST",
            url: "/phone/updateDeviceMaxValue",
            data: {"id":id,"maxSendValue":maxSendValue},
            success: function(result){
                if(1==result.returnInfo.state){
                    window.location.reload();
                }else{
                    alert(result.returnInfo.errorMsg);
                }
            },
            error: function(result){
                alert(result);
            }
        });
    }

    function deleteContent() {


        $.ajax({
            type: "POST",
            url: "/phone/deleteDevice",
            data: {"productId":$("#productId").val()},
            success: function(result){
                if(1==result.returnInfo.state){
                    window.location.reload();
                }else{
                    alert(result.returnInfo.errorMsg);
                }
            },
            error: function(result){
                alert(result);
            }
        });
    }




</script>
</body>

</html>
